<template>
	<div class="siting">
		<div class="main-icon">
			<!-- tit -->
			<div class="main-icon-a">
				<i :class="iconComes" style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;;background-color: #5a5a5a;color: #fff;"></i>
				<span style="font-size: 14px;font-weight:bold;margin-left: 12px;color: #606266;display: inline-block;width: 88px;">{{ CatalogueName }}</span>
			</div>
		<!-- btn1 -->
		<div class="main-icon-c">
			<el-select v-model="selectedValue" filterable placeholder="选择今天" size="mini">
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</div>
		<div class="btn2" style="margin-left: 12px;">
		<!-- 时间段 -->
		<el-time-picker
			is-range
			v-model="timePicker"
			range-separator="至"
			start-placeholder="开始时间"
			end-placeholder="结束时间"
			placeholder="选择时间范围"
			size="mini"
			>
		</el-time-picker>
		</div>
		<!-- 病人费别 -->
		<div class="main-icon-c">
			<span style="font-size: 14px;color: #606266;font-weight: bold;display: inline-block;width: 78px;margin-left: 20px;">病人费别：</span>
			<el-select v-model="selectedValue" filterable placeholder="请选择" size="mini">
				<el-option
				  v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
			<!-- 收费员 -->
			<span style="font-size: 14px;color: #606266;font-weight: bold;display: inline-block;width: 68px;margin-left: 20px;">收费员：</span>
			<el-select v-model="selectedValue" filterable placeholder="请选择" size="mini">
				<el-option
				  v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
		</div>
		<!-- btn2 -->
		<div class="main-icon-c" style="margin-left: 12px;">
			<span style="font-size: 14px;color: #606266;font-weight: bold;display: inline-block;width: 88px;">健康ID：</span>
			<el-input size="mini" placeholder="编码、名称、拼音简码" suffix-icon="el-icon-key" v-model="searchValue"></el-input>
		</div>
		<!-- btn3 -->
		<div class="main-icon-c" style="margin-left: 12px;">
			<el-button v-for="(v,i) in headerBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="mini" plain @click="handClick(i)">{{ v.title }}</el-button>
		</div>
	</div>
	<!-- table -->
	<div class="table">
		<el-table :data="tableData" border @row-dblclick="handledbRow" style="width: 688px;">
			<el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
			<!-- fixed -->
			<el-table-column fixed="left" label="行号" type="index" width="68" align="center"></el-table-column>
			<!-- edit -->
			<el-table-column fixed="right" label="操作" width="148" align="center">
			      <template slot-scope="scope">
					  <div class="editbox" style="text-align: center;">
						<el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
						<el-button type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
					  </div>
			      </template>
			</el-table-column>
		</el-table>
		<!-- table2 -->
		<el-table :data="tableData2" border @row-dblclick="handledbRow" style="width: 688px;">
			<el-table-column v-for="(col, inx) in tableRows2" :key="inx" :type="col.type" :prop="col.prop" :label="col.name" :width="columnWidth(col, tableData)"></el-table-column>
			<!-- fixed -->
			<el-table-column fixed="left" label="行号" type="index" width="68" align="center"></el-table-column>
			<!-- edit -->
			<el-table-column fixed="right" label="操作" width="148" align="center">
				  <template slot-scope="scope">
					  <div class="editbox" style="text-align: center;">
						<el-button type="primary" @click="handleClickEdit(scope.row)" size="mini">编辑</el-button>
						<el-button type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
					  </div>
				  </template>
			</el-table-column>
		</el-table>
	</div>
	<!-- 分页 -->
	<el-pagination
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:current-page="pageNum"
	:page-sizes="[5, 10, 20]"
	:page-size="pageSize"
	:total="totalSize"
	layout="total, sizes, prev, pager, next, jumper"
	background
	>
	</el-pagination>
	<!-- feet -->
	<div class="feet">
		<el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="small" plain @click="feetHandClick(i)">{{ v.title }}</el-button>
	</div>
	<!-- add dialog -->
	<div class="addDiglog">
		<el-dialog title="新增" :visible.sync="dialogVisible" width="48%" :before-close="handleClose">
			<addDiglog></addDiglog>
		</el-dialog>
	</div>
	</div>
</template>

<script>
	// selfs / js
	import addDiglog from "./SitingAddDiglog.vue";
	export default{
		components:{
			addDiglog
		},
		data(){
			return{
				// str
				iconComes:'el-icon-ghlb',
				CatalogueName:'收费列表',
				DropDownedName:'可用',
				selectedValue:'',
				searchValue:'',
				timePicker:'',
				// blean
				loading:false,
				dialogVisible:false,
				// number
				pageNum: 1, //当前页currentPage
				pageSize: 8,
				totalSize: 10, //总条数
				// arr title右侧按钮
				headerBtn:[
				 { refesh:"refesh", title:"刷新", type:"primary", icon:"el-icon-refresh" },
				],
				feetBtn:[
				 { refesh:"refesh", title:"结班", type:"primary", icon:"el-icon-s-claim" },
				 { senior:"senior", title:"智慧医保结算明细下载", type:"primary", icon:"el-icon-download" },
				 { refesh:"refesh", title:"更多", type:"primary", icon:"el-icon-more" },
				 { refesh:"refesh", title:"支付订单", type:"primary", icon:"el-icon-tickets" },
				 { refesh:"refesh", title:"快速退款", type:"primary", icon:"el-icon-finished" },
				 { refesh:"refesh", title:"整单退费", type:"primary", icon:"el-icon-lcyt" },
				 { refesh:"refesh", title:"发票零退", type:"primary", icon:"el-icon-receiving" },
				 { refesh:"refesh", title:"发票补打", type:"primary", icon:"el-icon-files" },
				 { refesh:"refesh", title:"查看", type:"primary", icon:"el-icon-zoom-in" },
				 { refesh:"refesh", title:"导出", type:"primary", icon:"el-icon-upload2" },
				 { refesh:"refesh", title:"打印", type:"primary", icon:"el-icon-ggml" },
				 { refesh:"refesh", title:"关闭", type:"primary", icon:"el-icon-close" }
				 ],
				options:[
					{label: '选择今天',label: '选择今天'},{label: '选择昨天',value: '选择昨天'},{label: '选择上月',value: '选择上月'},{label: '选择本月',value: '选择本月'},
					{label: '会计期间',label: '会计期间'},{label: '选择本年',value: '选择本年'},{label: '选择上午',value: '选择上午'},{label: '统计晚上',value: '统计晚上'}
				],
				tableRows:[
					{ name:"系统序号", prop:"code", nz:"nz" },{ name:"健康序号", prop:"code", type:"" },{ name:"健康ID", prop:"healthID", type:"" },
					{ name:"姓名", prop:"label", type:""},{ name:"单据编号", prop:"IdCard", type:"" },{ name:"冲销状态", prop:"status", type:"" },
					{ name:"病员费别", prop:"operatingTime", nz:"nz" },{ name:"收费人", prop:"operatingTime", type:"" },{ name:"开单医生", prop:"operatingTime", type:"" },
					{ name:"收费时间", prop:"tel", type:"" },{ name:"应收金额", prop:"address", type:"" },{ name:"实收金额", prop:"operatingTime", type:"" },
					{ name:"现金支付", prop:"pType", type:"" },{ name:"医保支付", prop:"operater", type:"" },{ name:"其他支付方式", prop:"operatingTime", type:"" },
					{ name:"其他支付", prop:"address", type:"" },{ name:"健康卡付", prop:"address", type:"" },{ name:"银联支付", prop:"address", type:"" },
					{ name:"挂账支付", prop:"address", type:"" },{ name:"优惠金额", prop:"address", type:"" },{ name:"留观预交金", prop:"address", type:"" },
					{ name:"冲销人", prop:"address", type:"" },{ name:"冲销时间", prop:"address", type:"" },{ name:"预交退现", prop:"address", type:"" },
					{ name:"其他支付退现", prop:"address", type:"" },{ name:"数据状态n", prop:"address", type:"" },{ name:"支付健康序号", prop:"address", type:"" },
					{ name:"门特撤销", prop:"address", type:"" },{ name:"备注", prop:"address", type:"" },{ name:"发票张数", prop:"address", type:"" },
					{ name:"发票号", prop:"address", type:"" },{ name:"交易流水号", prop:"address", type:"" },{ name:"医保退费", prop:"address", type:"" },
					{ name:"其他退费", prop:"address", type:"" },{ name:"退费总额", prop:"address", type:"" }
				],
				tableRows2:[
					{ name:"发票编号", prop:"code", nz:"nz" },{ name:"打印次数", prop:"num", type:"" },{ name:"项目名称", prop:"label", type:"" },
					{ name:"打包序号I", prop:"dbNum", type:""},{ name:"数量", prop:"num", type:"" },{ name:"单价", prop:"operator", type:"" },
					{ name:"金额", prop:"operatingTime", nz:"nz" },{ name:"开单科室", prop:"operatingTime", type:"" },{ name:"开单医生", prop:"operatingTime", type:"" },
					{ name:"执行科室", prop:"tel", type:"" },{ name:"医保编码", prop:"address", type:"" },{ name:"医保名称", prop:"operatingTime", type:"" },
				],
				tableData: [
					{ num:'1', code:'1', label: '叶凡', IdCard: 'DJBH123', healthID: 'JK666888',status:"未冲销" , operatingTime:'2024-12-05 14：36：48',operator:'超级管理员',remark:'无关风月，我提序等你回。' },
					{ num:'2', code:'6', label: '王林', IdCard: 'DJBH234', healthID: 'JK666888',status:"已冲销" , operatingTime:'2024-12-06 16：42：03',operator:'超级管理员',remark:'悬笔一绝，那岸边浪千叠。' },
					{ num:'3', code:'7', label: '石昊', IdCard: 'DJBH345', healthID: 'JK666888',status:"未冲销" , operatingTime:'2024-12-06 23：36：28',operator:'超级管理员',remark:'情字何解，怎落笔都不对。' },	
				],
				tableData2: [
					{ num:'1', code:'1', label: '万物母气鼎', status: '可用', dbNum: '1001',operatingTime:'2024-12-05 14：36：48',operator:'超级管理员',remark:'无关风月，我提序等你回。' },
					{ num:'2', code:'6', label: '天逆珠', status: '可用', dbNum: '1002',operatingTime:'2024-12-06 16：42：03',operator:'超级管理员',remark:'悬笔一绝，那岸边浪千叠。' },
					{ num:'3', code:'7', label: '大罗剑胎', status: '可用', dbNum: '1003',operatingTime:'2024-12-06 23：36：28',operator:'超级管理员',remark:'情字何解，怎落笔都不对。' },	
				],
			}
		},
		methods:{
			// headers commond
			handleCommand(command) {
			  // console.log(command);
			  // 根据 command 值执行相应的逻辑
			  switch (command) {
				case 'a':
				  // 处理a的逻辑
				  console.log('执行A逻辑');
				  this.DropDownedName = '可用'
				  break;
				case 'b':
				  // 处理b的逻辑
				  console.log('执行B逻辑');
				  this.DropDownedName = '禁用'
				  break;
				case 'c':
				  // 处理b的逻辑
				  this.DropDownedName = '全部'
				  break;
				// ... 其他 case
			  }
			},
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑
						this.loading = true;
						if(this.selectedValue == ''){
							setTimeout(() => {
								this.$message.error('未知错误,请稍后重试！');
								this.loading = false;		
							}, 1500)
						}else{
							this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						}
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
					case 2:
						// 处理索引2的逻辑 => 新增
						this.addDialogVisible = true
						break;
				}
			},
			feetHandClick(i){
				// i event
				switch (i) {
					case 0:
					// 处理索引1的逻辑
					this.dialogVisible = true;
					break;
					case 1:
					// 处理索引1的逻辑
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
					break;
					case 2:
					// 处理索引2的逻辑 => 新增
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
					break;
					case 3:
					// 处理索引3的逻辑 => 新增
					this.$confirm('敬请期待')
					.then(_ => {})
					.catch(_ => {});
					break;
				}
			},
			// db events
			handledbRow(row, column, event){
				if(row){ this.form = row; this.dialogVisible = true } else { console.log('fail'); }
				// console.log(this.form);
				this.formdisabled = true
				this.form.textSpell = this.makePy(this.form.label).toLocaleUpperCase()
				// console.log(this.form.textSpell);
			},
			// col 里面包含了表头字段和名称，list 是表格数据
			    columnWidth(col, list) {
			      let prop = col.prop,lab = col.lab;
			      let width = 40; // 设定一个最小值
			      let maxlenStr = ""; // 最长字符串
			      for (let info of list) {
			        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			      }
			      width = Math.max(width, len(lab), len(maxlenStr));
			      // 表格自带的内边距(20px) 自调
			      return width + 24; // 这里加了 12px
			      function len(str) {
			        // 实际分配长度可根据需要自行调整
			        let length = 12;
			        for (const char of str + "") {
			          // 英文小写字符 8px
			          if ("a" <= char && char <= "z") length += 8;
			          // 英文大写字符 8px
			          else if ("A" <= char && char <= "Z") length += 8;
			          // 中文字符 28px
			          else if (char >= "\u4e00" && char <= "\u9fa5") length += 28;
			          // 其他 8px
			          else length += 12;
			        }
			        return length;
			  }
			},
			// addDiglog Close
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					done();
				  })
				  .catch(_ => {
				  });
			},
			//分页
			//每页条数改变触发
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageNum = val;
			},
			//当前条数改变触发
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNum = val;
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .el-dropdown{
		font-size: 14px;
		cursor: pointer;
	}
	/deep/ .el-select>.el-input{
		width: 120px;
	}
	/deep/ .el-range-editor--mini.el-input__inner{
		width: 188px;
	}
	/deep/ .el-dropdown:hover {
		font-weight: bold;
		color: #66b1ff;
	}
	/deep/ .el-icon--right{
		// background-color: #66b1ff;
	}
	/deep/ .el-popper[x-placement^=bottom]{
		margin-top: 0;
	}
	/deep/ .el-dialog__header{
		padding: 12px;
		background-color: #007bb0;
	}
	
	/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
		margin-bottom: 8px;
	}
	/deep/ .el-dialog__title{
		font-size: 12px;
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close:hover{
		background-color: brown;
	}
	.siting{
		
		.main-icon{
			display: flex;
			align-items: center;
			padding: 12px;
			line-height: 40px;
			.main-icon-a{
				// width: 240px;
				// background-color: #00557f;
			}
			.main-icon-b{
				margin-left: 28px;
			}
			// c
			.main-icon-c{
				display: flex;
				/deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b]{
					width: 80%;
				}
			}
		}
		.table{
			display: flex;
			
		}
		.feet{
			margin: 12px;
			display: flex;
			justify-content: start;
		}
	}
</style>